<template>
  <app-container>
    <app-block is-search>
      <zm-form inline :model="form" ref="searchForm" size="small">
        <zm-form-item prop="name">
          <el-input v-model="form.name" class="w150" placeholder="请输入岗位名称" />
        </zm-form-item>
        <zm-form-item prop="status" label="岗位状态:">
          <zm-data-select v-model="form.status" :list="STATUS_TYPE" class="w150" placeholder="请选择岗位状态"></zm-data-select>
        </zm-form-item>
        <zm-form-item>
          <zm-button t="search" @click="onSearch" />
          <zm-button t="reset" @click="onReset" />
          <zm-button @click="onNew" t="add" />
        </zm-form-item>
      </zm-form>
    </app-block>
    <app-block>
      <zm-table-data :data="tableParams.data" :columns="columns" :fetch="loadList" :table-params="tableParams">
      </zm-table-data>
    </app-block>

    <update-post v-if="updateVisible" v-model="updateVisible" :row-info="rowInfo" @after-save="afterSave"></update-post>
    <detail-post v-if="detailVisible" v-model="detailVisible" :row-info="detailInfo"></detail-post>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import UpdatePost from './components/UpdatePost'
import DetailPost from './components/DetailPost'
import { columns } from './const'
import { STATUS_TYPE } from '@/model/type'
import systemRoleApis from '@/api/src/systemRole'

export default {
  components: { UpdatePost, DetailPost },
  mixins: [tableMixin],
  data () {
    return {
      columns: columns(this),
      form: {
        name: '',
        status: '-1'
      },
      departmentList: [], // 部门列表
      STATUS_TYPE,
      updateVisible: false,
      rowInfo: {},
      detailVisible: false,
      detailInfo: {}
    }
  },
  computed: {
  },
  watch: {},
  created () {
  },
  methods: {
    async loadList () {
      const res = await systemRoleApis.getPageList(this.assignQuery(this.form))
      this.initialTableData(res.list, res.count)
    },
    onNew () {
      this.rowInfo = {}
      this.updateVisible = true
    },
    onEdit (row) {
      this.rowInfo = row
      this.updateVisible = true
    },
    afterSave () {
      this.loadList()
    },
    onDetail (row) {
      this.detailInfo = row
      this.detailVisible = true
    },
    onSwitch (row) {
      let status = row.status === '1' ? '2' : '1'
      let text = row.status === '1' ? '停用' : '恢复'
      this.$confirm(`是否确认将【${row.name}】` + text + '？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await systemRoleApis.setStatus({ id: row.id, status: status })
        this.$message.success('操作成功!')
        this.loadList()
      })
    },
    onDelete (row) {
      this.$confirm('是否确认删除该岗位？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await systemRoleApis.delete({ id: row.id })
        this.loadList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    }
  }
}
</script>
